<template>
	<view class="article-image flex-r ac jc big-image video-box" :class="{'full-width': isFullWidth}" v-if="videoUrl">
		<lazy-image class="thumb-img inheritwh" :src="videoUrl+'?vframe/jpg/offset/1'" fit="cover"></lazy-image>
		<image v-if="type==='ballbar'||type==='readlog'" class="play-spt" src="@/public/images/bar/spt.png"></image>
		<image class="playIcon" src="@/public/images/public/bfj.png" mode="widthFix"></image>
	</view>
	<view class="article-image flex-r"
		:class="{'full-width': isFullWidth, 'big-image': imageUrl.split(',').length == 1}" v-else-if="imageUrl">
		<lazy-image :src="imageUrl.split(',')[0]+'?imageView2/1/w/710/h/400/q/50'" fit="cover"
			v-if="imageUrl.split(',').length == 1"></lazy-image>
		<template v-else>
			<lazy-image v-for="(img, index) in imageUrl.split(',').slice(0, 3)"
				:src="img+'?imageView2/1/w/226/h/170/q/50'" :key="index" fit="cover"></lazy-image>
		</template>
	</view>
</template>

<script>
	/**
	 * VideoUrl 视频缩略图与播放组件
	 * @description 用于列表视频缩略图展示
	 * @property {String} videoUrl 视频地址
	 * @property {String} imageUrl 图片地址
	 * @property {Boolean} isFullWidth 是否占满屏幕宽度
	 */
	export default {
		name: "VideoUrl",
		props: {
			videoUrl: {
				type: String,
				default: ''
			},
			imageUrl: {
				type: String,
				default: ''
			},
			isFullWidth: {
				type: Boolean,
				default: false
			},
			type:{
				type:String,
				default:''
			}
		},

	}
</script>

<style lang="scss" scoped>
	.article-image {
		flex-wrap: wrap;
		margin-top: 15rpx;

		.lazy-image {
			width: 218rpx;
			height: 164rpx;
			border-radius: 8rpx;
			margin-right: 8rpx;
		}

		.lazy-image:nth-child(3) {
			margin-right: 0;
		}

		&.more {
			justify-content: space-between;
			position: relative;

			.morenum {
				position: absolute;
				top: 0;
				right: 0;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 218rpx;
				height: 164rpx;
				font-size: 40rpx;
				color: #FFFFFF;
				background-color: rgba(0, 0, 0, 0.4);
				border-radius: 8rpx;
			}
		}

		&.big-image {
			.lazy-image {
				width: 670rpx;
				height: 376rpx;
				border-radius: 10rpx;
				margin-right: 0;
			}
		}

		&.full-width {
			.lazy-image {
				width: 226rpx;
				height: 170rpx;
				margin-right: 16rpx;
			}

			.lazy-image:nth-child(3) {
				margin-right: 0;
			}

			&.more {
				.morenum {
					width: 226rpx;
					height: 170rpx;
				}
			}

			&.big-image {
				.lazy-image {
					width: 710rpx;
					height: 400rpx;
					margin-right: 0;
				}
			}
		}

		&.video-box {
			position: relative;

			.thumb-img {
				background: #1F2633;
			}

			.playIcon {
				position: absolute;
				width: 100rpx;
				height: 100rpx;
			}

			.play-spt {
				position: absolute;
				top: 10rpx;
				left: 10rpx;
				width: 80rpx;
				height: 32rpx;
			}
		}

	}
</style>